import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {View,Text,TouchableOpacity,StyleSheet,ImageBackground,FlatList,TextInput,Alert} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
import './global'
import { Provider } from 'react-redux';
import store from './store';
import { useSelector,useDispatch } from 'react-redux';
import Home from './router/home/Home'
import Study from './router/study/Study'
import Share from './router/share/Share'
import User from './router/user/User'
import Write from './router/user/Write';
import Like from './router/user/Like';
import LookHistory from './router/user/LookHistory';
import Message from './router/user/Message';
import Help from './router/user/Help';
import Setting from './router/user/Setting';
import Check from './router/home/Check';
import Book from './router/home/Book';
import Task from './router/home/Task'
import Detail from './router/study/Detail';
import ShareDetail from './router/share/ShareDetail';
import Write2 from './router/share/Write';
import Ency from './router/home/Ency';
import EDetail from './router/home/EDetail';
import Schooldetail from './router/home/Schooldetail';
import College from './router/home/College';
import Provider1 from './context'
import RecruitDetail from './router/home/RecruitDetail';
import Login from './router/login/Login';
import Register from './router/login/Register';
import Start from './router/home/Start';
import Words from './router/home/Words'
import Word from './router/home/Word';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const showAlert = (msg,fun) =>
  Alert.alert(
    "提示",
    msg,
    [
      {
        text: "确认",
        onPress: fun,
        style: "cancel",
      },
    ],
    {
      cancelable: false,
    }
  );

const TabBar = ({navigation})=>{
  const list=useSelector(state=>state.list)
  return (<Tab.Navigator
    screenOptions={{
      headerShown:true,
      headerStyle:{
        backgroundColor:'#FFFFFF'
      },
      tabBarActiveTintColor: 'rgb(204,190,151)',
      tabBarLabelStyle: {fontSize:17},
      tabBarStyle: {width:'100%',height:changeH(110)}
    }}
    >
      <Tab.Screen name='Home' 
        component={Home} 
        options={{
          title:'首页',
          headerShown:false,
          tabBarIcon:({color,size})=><AntDesign name='home'color={color} size={changeW(50)}/>
        }}
        
        />
      <Tab.Screen name='Study' component={Study} options={{title:'学习',headerTitleAlign:'center',tabBarIcon:({color,size})=><AntDesign name='book'color={color} size={changeW(50)}/>}}/>
      <Tab.Screen name='Share' component={Share} options={{title:'圈子',headerTitleAlign:'center',headerRight:()=>{
        return (
          <TouchableOpacity onPress={()=>{
            if(list.isLogin==false){
                showAlert('请先登录',()=>navigation.navigate('Login'))
            }else{
                navigation.navigate('Write2')
            }
          }}>
            <Ionicons name="add-circle-outline" size={24} color="black" style={{marginRight:changeW(20)}}/>
          </TouchableOpacity>
        )
      },tabBarIcon:({color,size})=><AntDesign name='find'color={color} size={changeW(50)}/>}}/>
      <Tab.Screen name='User' component={User} options={{title:'我的',headerShown:false,tabBarIcon:({color,size})=><AntDesign name='user'color={color} size={changeW(50)}/>}}/>
    </Tab.Navigator>)
}


export default function App() {
  return (
    <Provider store={store}>
    <Provider1>
    <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name='Start' component={Start} options={{headerShown:false}}></Stack.Screen>
      <Stack.Screen name='Root' component={TabBar} options={{headerShown:false}}></Stack.Screen>

      {/* Home的二级路由 */}
      <Stack.Screen name='Book' component={Book} options={{headerTitleAlign:'center',title:'参考书'}}></Stack.Screen>
      <Stack.Screen name='Task' component={Task} options={{headerTitleAlign:'center',title:'添加任务'}}></Stack.Screen>
      <Stack.Screen name='Ency' component={Ency} options={{headerTitleAlign:'center',title:'百科'}}></Stack.Screen>
      <Stack.Screen name='Word' component={Word} options={{headerTitleAlign:'center',title:'背单词'}}></Stack.Screen>
      <Stack.Screen name='Check' component={Check} options={{headerTitleAlign:'center',title:'每日打卡'}}></Stack.Screen>
      <Stack.Screen name='EDetail' component={EDetail} options={{headerTitleAlign:'center',title:'内容详情'}}></Stack.Screen>
      <Stack.Screen name='Schooldetail' component={Schooldetail} options={{headerTitleAlign:'center',title:'院校'}}></Stack.Screen>
      <Stack.Screen name='College' component={College} options={{headerTitleAlign:'center',title:'院校'}}></Stack.Screen>
      <Stack.Screen name='RecruitDetail' component={RecruitDetail} options={{headerTitleAlign:'center',title:'招生简章'}}></Stack.Screen>
      <Stack.Screen name='Words' component={Words} options={{headerShown:false}}></Stack.Screen>
      {/* 学习的二级路由 */}
      <Stack.Screen name='Detail' component={Detail} options={{headerTitleAlign:'center',title:'内容详情'}}></Stack.Screen>
      
      {/* 圈子的二级路由 */}
      <Stack.Screen name='ShareDetail' component={ShareDetail} options={{headerTitleAlign:'center',title:'内容详情'}}></Stack.Screen>
      <Stack.Screen name='Write2' component={Write2} options={{headerTitleAlign:'center',title:'写内容'}}></Stack.Screen>

      {/* User的二级路由 */}
      <Stack.Screen name='Write' component={Write} options={{headerTitleAlign:'center',title:'我的创作'}}></Stack.Screen>
      <Stack.Screen name='Like' component={Like} options={{headerTitleAlign:'center',title:'我的喜欢'}}></Stack.Screen>
      <Stack.Screen name='History' component={LookHistory} options={{headerTitleAlign:'center',title:'浏览历史'}}></Stack.Screen>
      <Stack.Screen name='Message' component={Message} options={{headerTitleAlign:'center',title:'消息'}}></Stack.Screen>
      <Stack.Screen name='Help' component={Help} options={{headerTitleAlign:'center',title:'帮助与反馈'}}></Stack.Screen>
      <Stack.Screen name='Setting' component={Setting} options={{headerTitleAlign:'center',title:'系统设置'}}></Stack.Screen>
     

      {/* 登录/注册 */}
      <Stack.Screen name='Login' component={Login} options={{headerTitleAlign:'center',title:'登录'}}></Stack.Screen>
      <Stack.Screen name='Register' component={Register} options={{headerTitleAlign:'center',title:'注册'}}></Stack.Screen>
    </Stack.Navigator>
    

  </NavigationContainer>
  </Provider1>
  </Provider>
  );
}
